const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { loader } = require('mini-css-extract-plugin');


var getHtmlConfig = function (name) { //打包view html
    return {
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: ['common', name],
        minify: {
            collapseInlineTagWhitespace: false,
        }
    }

}


var config = {
    //关闭 webpack 的性能提示
    performance: {
        hints: false
    },
    mode: "none",

    entry: {//多入口
        'common': ['./src/page/common/index.js', './src/page/common/header/index.js'],
        // 'index': ['./src/page/index.js'],
        'account-login': ['./src/page/account-login/index.js'],
        'account-myAccount': ['./src/page/account-myAccount/index.js'],
        'catalog-main': ['./src/page/catalog-main/index.js'],
        'cart': ['./src/page/cart/index.js'],
        'order-orderForm': ['./src/page/order-orderForm/index.js'],
        'order-confirmOrder': ['./src/page/order-confirmOrder/index.js'],
        'catalog-list': ['./src/page/catalog-list/index.js'],
        'order-finalOrder': ['./src/page/order-finalOrder/index.js'],
        'order-myOrder': ['./src/page/order-myOrder/index.js'],
        'help': ['./src/page/help/index.js'],
    },

    output: {
        // filename: 'bundle.js',
        filename: 'js/[name].js',//分入口打包
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/asset/',
    },
    devServer: {
        // hot:false,
        port: 8888,
        static: {
            directory: path.join(__dirname, 'dist')
        },
        proxy: {
            '/account': {
                target: 'http://localhost:8080', // 后端服务器地址
                changeOrigin: true,
                secure: false
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }
                    ,
                    {
                        loader: 'css-loader',
                        options: {
                            esModule: false,
                            importLoaders: 1
                        }
                    }
                    // { loader: 'style-loader' }, { loader: 'css-loader' }

                ]

            }, {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'asset/images/[name].[ext]',
                        limit: 10,
                        esModule: false,
                    }
                }
            },
            {
                test: /\.(htm|string)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        esModule: false,
                        minimize: false,
                    }
                }
            }
        ]
    },
    plugins: [
        // new CleanWebpackPlugin(),//清除dist文件夹
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('account-login')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('account-myAccount')),
        new HtmlWebpackPlugin(getHtmlConfig('cart')),
        new HtmlWebpackPlugin(getHtmlConfig('order-orderForm')),
        new HtmlWebpackPlugin(getHtmlConfig('order-confirmOrder')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-list')),
        new HtmlWebpackPlugin(getHtmlConfig('order-finalOrder')),
        new HtmlWebpackPlugin(getHtmlConfig('order-myOrder')),
        new HtmlWebpackPlugin(getHtmlConfig('help')),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',       // 注入 $ 符号
            jQuery: 'jquery'   // 注入 jQuery 符号
        })
    ],
    optimization: {
        minimize: false,//取消压缩
        minimizer: [
            new TerserPlugin({
                extractComments: false, //不将注释提取到单独的文件中
            })
        ],
        splitChunks: {//公共模块提取 js
            cacheGroups: {
                commons: {
                    name: 'util',
                    chunks: 'all',
                    minChunks: 2,
                    minSize: 0
                }

            }
        }
    },
    resolve: {
        alias: {
            util: __dirname + '/src/util',
            page: __dirname + '/src/page',
            view: __dirname + '/src/view',
            images: __dirname + '/src/images',
            service: __dirname + '/src/service',
            node_modules: __dirname + '/node_modules',
        }

    }

};

module.exports = config;